<template>
  <div id="mymask" @click="hidemask">
    <ul>
      <li
        v-for="item in masklist"
        :key="item.id"
        @click.stop="changeback(item.id)"
        :style="{ background: $store.state.backcolor }"
      >
        {{ item.content }}
      </li>
    </ul>
    <div class="right"></div>
  </div>
</template>

<script>
export default {
  name: "mymask",
  data() {
    return {
      masklist: [
        {
          content: "切换主题",
          id: 0,
        },
        {
          content: "管理数据",
          id: 1,
        },
        {
          content: "下载数据",
          id: 2,
        },
        {
          content: "修改数据",
          id: 3,
        },
        {
          content: "清空数据",
          id: 4,
        },
      ],
      colors: ["red", "green", "pink", "skyblue", "blue", "yellow", "gray"],
    };
  },
  methods: {
    hidemask() {
      this.$store.commit("changemask", false);
    },
    changeback(id) {
      if (id === 0) {
        this.$store.commit(
          "changecolor",
          this.colors[Math.round(Math.random() * 4)]
        );
      }
    },
  },
};
</script>

<style lang="scss" scoped>
#mymask {
  width: 100%;
  height: 100%;
  display: flex;
  ul {
    width: 70%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    padding: 50px 0;
    li {
      color: #fff;
      width: 50%;
      height: 60px;
      line-height: 60px;
      border-radius: 5px;
      font-size: 24px;
    }
  }
  .right {
    width: 30%;
    height: 100%;
    background: rgba(0, 0, 0, 0);
  }
}
</style>